<template>
	<view class="content">
		<u-popup mode="left" v-model="show" border-radius="14" width="710rpx" close-icon-pos="top-left" safe-area-inset-bottom closeable="true">
			<view class="content22">
				<!-- <scroll-view scroll-y="true" style="height: 100% ;"> -->
				<!-- <view class="calbox"> -->
				<uni-calendar
					:insert="true"
					:lunar="false"
					:start-date="'2019-3-2'"
					:end-date="'2090-9-9'"
					:range="true"
					@change="calChange"
					@monthSwitch="flgMm"
					:selected="selected"
				></uni-calendar>
				<!-- </view> -->
				<!-- </scroll-view> -->
				<view class="selectionPd">选择时间</view>
				<view class="" style="color: #dcdc ; font-size: 30rpx; width: 100%; display: flex; justify-content: space-around;">
					<text class="">开始时间</text>
					<text class="">结束时间</text>
				</view>

				<view class="" style="display: flex;">
					<view class="time f-1">
						<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" mask-style="background:#ffffff00;z-index:0;">
							<picker-view-column class="item11">
								<view class="item" v-for="(item, index) in hours" :key="index">{{ item }}时</view>
							</picker-view-column>
							<picker-view-column class="item22">
								<view class="item" v-for="(item, index) in minutes" :key="index">{{ item }}分</view>
							</picker-view-column>
						</picker-view>
					</view>
					<view class="time f-1">
						<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange1" mask-style="background:#ffffff00;z-index:0;">
							<picker-view-column class="item11">
								<view class="item" v-for="(item, index) in hours" :key="index">{{ item }}时</view>
							</picker-view-column>
							<picker-view-column class="item22">
								<view class="item" v-for="(item, index) in minutes" :key="index">{{ item }}分</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>
				<view class="confrim-btn">
					<view class="left">
						<text>开始时间：&emsp;{{ startingTm ? startingTm : dt1 }}&emsp;{{ selectRes ? selectRes : dt }}</text>
						<text>结束时间：&emsp;{{ endTm ? endTm : dt1 }}&emsp;{{ selectRes1 ? selectRes1 : dt }}</text>
					</view>
					<view class="right" @click="this.show = false">确认</view>
				</view>
			</view>
		</u-popup>
		<view class="head"><image :src="data.figure" mode="aspectFill" @click="previewPic(data.figure)"></image></view>
		<view class="details" style="margin-top: -30rpx;">
			<view class="layer">
				<text>{{ data.name }}</text>
				<text>￥{{ data.rent | decimal }}/天</text>
			</view>
			<view class="scndFlrr">
				<view class="imm" v-if="dds">
					<text style="margin-right: 8rpx;">限时折扣</text>
					<u-count-down
						separator-size="22"
						font-size="22"
						:timestamp="timestamp"
						:separator="zh"
						:bg-color="transparent"
						separator-color="#DB000A"
						color="#DB000A"
					></u-count-down>
				</view>
				<view class="imm" v-else>
					<text style="margin-right: 8rpx;"></text>
					<!-- <u-count-down
						separator-size="22"
						font-size="22"
						:timestamp="timestamp"
						:separator="zh"
						:bg-color="transparent"
						separator-color="#DB000A"
						color="#DB000A"
					></u-count-down> -->
				</view>

				<view class="horzPrc" v-if="data.lineation !== '0.00'">￥{{ data.lineation | decimal }}/天</view>
				<view class="horzPrc" v-else></view>
			</view>
			<view class="threeLayers">
				<text v-if="data.plate">{{ data.plate | hide }}</text>
				<text>押金{{ data.deposit }}</text>
			</view>
			<view class="fourPercent"></view>
			<view class="fifthFlr">
				<text>长租优惠</text>
				<!-- <image src="../../../static/home/xiabian.png" mode=""></image> -->
			</view>
			<view class="sixthFlr">
				<view v-for="(item, index) in data.details" :key="index">
					<!-- <text v-text="data.details"></text> -->
					<!-- <u-parse :html="data.details" class="text"></u-parse> -->
					<text class="text">{{ item }}</text>
				</view>
			</view>
		</view>
		<view class="cal" @click="opnCal">
			<view class="layer">
				<view class="layer1">
					<text class="text">选择租用时间</text>
					<!-- <text class="text1">1天起租</text> -->
				</view>
				<view class="layer2"><image src="../../../static/home/dayu.png" mode=""></image></view>
			</view>
			<view class="scndFlr">
				<view class="week f j-b">
					<text class="f a-c j-c" v-for="(item, index) in data.calendar.week" :key="index">{{ item }}</text>
				</view>
				<view class="day f j-b a-c">
					<text class="f a-c j-c" v-for="(item, index) in data.calendar.day" :key="index">{{ item }}</text>
				</view>
				<view class="time f j-b">
					<view class="carTm f a-c j-c" v-if="!startingTm">
						用车时间：{{ $u.timeFormat(+new Date(), 'yyyy-mm-dd') }}至{{ $u.timeFormat(+new Date() + 86400000, 'yyyy-mm-dd') }}
					</view>
					<view class="carTm f a-c j-c" v-else>用车时间：{{ startingTm }}至{{ endTm }}</view>

					<!-- <text>清除</text> -->
				</view>
			</view>
		</view>
		<view class="introduction">
			<u-sticky>
				<view class="beijingtu" style="background-color: #2a2929;">
					<view v-for="(item, index) in 4" :key="index" @click="dynamicallyAddClas(index)"><text :class="{ active: currentIndex === index }"></text></view>
				</view>

				<view class="frstFlr">
					<text>车辆数据</text>
					<text>车辆保障</text>
					<text>特色服务</text>
					<text>用车流程</text>
				</view>
			</u-sticky>
			<view class="vehIntroduction">
				<view class="one">
					<text class="text">车辆数据</text>
					<text class="text1"></text>
				</view>
				<view class="two">
					<view class="yangshi1"></view>
					<view class="yangshi2"></view>
					<view class="yangshi3"></view>
					<view class="yangshi4"></view>
					<view class="example1">
						<view class="bgc"><image :src="data.introduce[0].icon" mode=""></image></view>
						<text>{{ data.introduce[0].name }}</text>
						<view class="xiahuanxian"></view>
					</view>
					<view class="example2">
						<view class="bgc"><image :src="data.introduce[1].icon" mode=""></image></view>
						<text>{{ data.introduce[1].name }}</text>
						<view class="xiahuanxian"></view>
					</view>
					<view class="example3">
						<view class="bgc"><image :src="data.introduce[2].icon" mode=""></image></view>
						<text>{{ data.introduce[2].name }}</text>
						<view class="xiahuanxian"></view>
					</view>
					<view class="example4">
						<view class="bgc"><image :src="data.introduce[3].icon" mode=""></image></view>
						<text>{{ data.introduce[3].name }}</text>
						<view class="xiahuanxian"></view>
					</view>
					<view class="example5">
						<view class="bgc"><image :src="data.introduce[4].icon" mode=""></image></view>
						<text>{{ data.introduce[4].name }}</text>
						<view class="xiahuanxian"></view>
					</view>
					<view class="example6">
						<view class="bgc"><image :src="data.introduce[5].icon" mode=""></image></view>
						<text>{{ data.introduce[5].name }}</text>
						<view class="xiahuanxian"></view>
					</view>
				</view>
			</view>
			<view class="redHorzLine"><view class="red"></view></view>
			<view class="vehSecurity">
				<view class="one">
					<text class="text">车辆保障</text>
					<text class="text1"></text>
				</view>
				<view class="two">
					<view class="yangshi1"></view>
					<view class="yangshi2"></view>
					<view class="example1">
						<view class="bgc"><image :src="data.security[0].icon" mode=""></image></view>
						<text>{{ data.security[0].name }}</text>
						<view class="xiahuanxian"></view>
					</view>
					<view class="example2">
						<view class="bgc"><image :src="data.security[1].icon" mode=""></image></view>
						<text>{{ data.security[1].name }}</text>
						<view class="xiahuanxian"></view>
					</view>
					<view class="example3">
						<view class="bgc"><image :src="data.security[2].icon" mode=""></image></view>
						<text>{{ data.security[2].name }}</text>
						<view class="xiahuanxian"></view>
					</view>
				</view>
			</view>
			<view class="redHorzLine"><view class="red"></view></view>
			<view class="specialServ">
				<view class="one">
					<text class="text">特色服务</text>
					<text class="text1"></text>
				</view>
				<view class="two">
					<view class="yangshi1"></view>
					<view class="yangshi2"></view>
					<view class="example1">
						<view class="bgc"><image :src="data.service[0].icon" mode=""></image></view>
						<text>{{ data.service[0].name }}</text>
						<view class="xiahuanxian"></view>
					</view>
					<view class="example2">
						<view class="bgc"><image :src="data.service[1].icon" mode=""></image></view>
						<text>{{ data.service[1].name }}</text>
						<view class="xiahuanxian"></view>
					</view>
					<view class="example3">
						<view class="bgc"><image :src="data.service[2].icon" mode=""></image></view>
						<text>{{ data.service[2].name }}</text>
						<view class="xiahuanxian"></view>
					</view>
				</view>
			</view>
			<view class="redHorzLine"><view class="red"></view></view>
			<view class="carProcess">
				<view class="one">
					<text class="text">用车流程</text>
					<text class="text1"></text>
				</view>
				<view class="two">
					<view class="yangshi1"></view>
					<view class="yangshi2"></view>
					<view class="example1">
						<view class="bgc"><image :src="data.process[0].icon" mode=""></image></view>
						<text>{{ data.process[0].name }}</text>
						<view class="xiahuanxian"></view>
					</view>
					<view class="example2">
						<view class="bgc"><image :src="data.process[1].icon" mode=""></image></view>
						<text>{{ data.process[1].name }}</text>
						<view class="xiahuanxian"></view>
					</view>
					<view class="example3">
						<view class="bgc"><image :src="data.process[2].icon" mode=""></image></view>
						<text>{{ data.process[2].name }}</text>
						<view class="xiahuanxian"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="!agent">
			<view class="ordrNow" @click="ordrNow(1)" v-if="!yy">立即下单</view>
			<view class="ordrNow" @click="ordrNow(2)" v-else>立即下单</view>
		</view>
	</view>
</template>

<script>
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';

export default {
	components: {
		uniCalendar,
	},
	data() {
		const date = new Date();
		const years = [];
		const year = date.getFullYear();
		const months = [];
		const month = date.getMonth() + 1;
		const days = [];
		const day = date.getDate();
		const hours = [];
		const hour = date.getHours();
		const minutes = [];
		const minute = date.getMinutes();

		for (let i = 1990; i <= date.getFullYear(); i++) {
			years.push(i);
		}

		for (let i = 1; i <= 12; i++) {
			months.push(i);
		}

		for (let i = 1; i <= 31; i++) {
			days.push(i);
		}
		for (let i = 0; i <= 24; i++) {
			hours.push(i);
		}
		for (let i = 0; i <= 60; i++) {
			minutes.push(i);
		}

		return {
			title: 'picker-view',
			years,
			year,
			months,
			month,
			days,
			day,
			hour,
			hours,
			minutes,
			minute,
			selectRes: '',
			selectRes1: '',
			dt: '',
			dt1: '',
			startingTm: '',
			endTm: '',
			timestamp: '',
			flg: true,
			value: [9999, month - 1, day - 1, hour - 1, minute - 1],
			/**
			 * 解决动态设置indicator-style不生效的问题
			 */
			visible: true,
			indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px;`,

			/**
			 */
			params1: {
				year: false,
				month: false,
				day: false,
				hour: true,
				minute: true,
				second: false,
			},
			show: false,
			currentIndex: 0,
			uid: 0,
			cid: '', // 车辆id
			data: {},
			discount_time: [], // 活动时间
			yy: '',
			params: {
				year: false,
				month: false,
				day: false,
				hour: true,
				minute: true,
				second: false,
			},
			selected: [],
			tmLeft: [], // 时间
			dange: '',
			duoge: [],
			dds: true,
			agent: '',
		};
	},
	onShow() {
		this.getCal();
	},
	onUnload() {
		console.log('object :>> 点击返回事件 ');
		uni.removeStorageSync('yy');
		uni.removeStorageSync('yy1');
	},
	onLoad(id) {
		let obj = JSON.parse(id.obj);
		console.log('obj11:>> ', obj);
		this.uid = uni.getStorageSync('uid');
		this.yy = uni.getStorageSync('yy');

		this.agent = obj.agent;
		this.cid = obj.id;
		this.details();
		this.getCal();
		this.getTheYrMmAndDd();
		if (this.yy == 1) {
			this.show = true;
		}
	},
	onPageScroll(res) {
		console.log('------------------------------------ :>> ', res);
		if (res.scrollTop == 800) {
			this.currentIndex = 1;
		}
		if (res.scrollTop == 700) {
			this.currentIndex = 0;
		}
		if (res.scrollTop == 900) {
			this.currentIndex = 2;
		}
		if (res.scrollTop == 1003) {
			this.currentIndex = 3;
		}
	},
	methods: {
		async flgMm(e) {
			let month = `${e.year}-${e.month}`;
			let obj = {
				cid: this.cid,
				month,
			};
			const res = await this.$u.post('api/car/calendar', obj, {});
			console.log('res >>  ', res);
			this.selected = res.data;
		},

		previewPic(urls) {
			uni.previewImage({
				urls: [urls],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					},
				},
			});
		},
		getTheYrMmAndDd() {
			var a = +new Date();
			var date = new Date(parseInt(a));
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = date.getDate() + ' ';
			var h = date.getHours() + ':';
			var m = date.getMinutes();
			var s = date.getSeconds();
			this.dt = h + m;
			this.dt1 = Y + M + D;
			console.log('this.dt :>> ', this.dt);
		},
		bindChange(e) {
			const val = e.detail.value;

			this.hour = this.hours[val[0]];
			this.minute = this.minutes[val[1]];
			this.selectRes = `${this.hour + ':' + this.minute}`;
			console.log('this.selectRes  :>> ', this.selectRes);
		},
		bindChange1(e) {
			const val = e.detail.value;

			this.hour = this.hours[val[0]];
			this.minute = this.minutes[val[1]];
			this.selectRes1 = `${this.hour + ':' + this.minute}`;
			console.log('this.selectRes1  :>> ', this.selectRes1);
		},

		calChange(e) {
			// console.log('e----------- :>> ', e); //info

			this.dange = e.fulldate;
			this.duoge = e.range.data;

			if (e.range.after) {
				this.startingTm = e.range.data[0];
				this.endTm = e.range.data[e.range.data.length - 1];
			} else {
				this.startingTm = e.fulldate;
				this.endTm = e.fulldate;
			}
		},

		opnCal() {
			this.show = true;
		},
		// 获取日历
		async getCal() {
			const res = await this.$u.post('api/car/calendar', {
				cid: this.cid,
				month: 0,
			});
			this.selected = res.data;
		},
		//获取车辆详情
		async details() {
			const res = await this.$u.post('api/car/car_details', {
				cid: this.cid,
			});
			console.log('获取车辆详情 >>  ', res);
			this.data = res.data;

			let a = res.data.discount_time.split(',');

			//1608946796  1608946796
			//var gap = Date.parse(a[1]) - Date.parse(a[0]);

			let x = Number(+new Date() / 1000).toFixed();
			this.timestamp = Date.parse(a[1]) / 1000 - x;
			console.log('this.timestamp :>> ', this.timestamp);

			if (this.timestamp <= 0 || isNaN(this.timestamp)) {
				this.dds = false;
			}
			// if (isNaN(this.timestamp) ) {
			// 	this.dds = false
			// }

			// if (!gap) {
			// 	return;
			// 	this.tmLeft = ['时', '间', '已', '过'];
			// } else {
			// 	this.timestamp = gap / 1000;
			// }
		},
		// 1 正常 2 续租
		async ordrNow(i) {
			if (!this.startingTm) {
				var _this = this;
				uni.$showMsg('请选择租车日期');
				setTimeout(function() {
					_this.show = true;
				}, 500);
				return;
			}

			// if (!this.selectRes) {
			// 	var _this = this;
			// 	uni.$showMsg('请选择租车时间');
			// 	setTimeout(function() {
			// 		_this.show = true;
			// 	}, 500);
			// 	return;
			// }

			// 可租时间
			var a = [];

			this.selected.forEach(e => {
				if (e.status == 2) {
					a.push(e.date);
				}
			});
			console.log('this.duoge :>> ', this.duoge);
			var x = [];
			this.duoge.forEach(e2 => {
				x.push(e2.replace('-0', '//'));
			});

			var y = [];
			x.forEach(e2 => {
				y.push(e2.replace('-0', '-'));
			});

			var z = [];
			y.forEach(e2 => {
				z.push(e2.replace('//', '-0'));
			});

			z.forEach(e2 => {
				var show = a.includes(e2);

				if (!show) {
					this.flg = false;
					uni.$showMsg('请重新选择租车日期');
				}
			});
			if (i == 1) {
				if (this.flg) {
					
					let [x, y] = [this.startingTm + ' ' + this.selectRes, this.endTm + ' ' + this.selectRes1];
					console.log('x :>> ', x);
					console.log('y :>> ', y);
					if (x == y) {
						let [start, end] = ['00:00:00', '23:59:59'];
						var carTime = [this.startingTm + ' ' + start, this.endTm + ' ' + end];
					} else {
						var carTime = [this.startingTm + ' ' + this.selectRes, this.endTm + ' ' + this.selectRes1];
					}
					const res = await this.$u.post('api/car/place_order', {
						cid: this.cid,
						uid: uni.getStorageSync('uid'),
						carTime, // 时间段
					});
					console.log('立即下单 >>  ', res);

					if (!res.code) return uni.$showMsg();

					uni.navigateTo({
						url: '../../order/submitOrdr/submitOrdr?oid=' + res.data,
					});
				}
			} else {
				const res = await this.$u.post('api/car/vehicle_renewal', {
					uid: uni.getStorageSync('uid'),
					oid: uni.getStorageSync('yy1'),
					lease: [this.startingTm + ' ' + this.selectRes, this.endTm + ' ' + this.selectRes],
				});
				uni.navigateTo({
					url: '../../order/rnwlPayment/rnwlPayment?oid=' + res.data,
				});
				uni.$showMsg(res.msg);
				uni.removeStorageSync('yy');
				uni.removeStorageSync('yy1');
				uni.setStorageSync('pay', 1);
				console.log('续租 >> ', res);
			}
		},
		// 动态添class
		dynamicallyAddClas(index) {
			this.currentIndex = index;
			if (index === 0) {
				uni.pageScrollTo({
					selector: '.vehIntroduction',
					duration: 300,
				});
			} else if (index === 1) {
				uni.pageScrollTo({
					selector: '.vehSecurity',
					duration: 300,
				});
			} else if (index === 2) {
				uni.pageScrollTo({
					selector: '.specialServ',
					duration: 300,
				});
			} else if (index === 3) {
				uni.pageScrollTo({
					selector: '.carProcess',
					duration: 300,
				});
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	height: 100%;
	background-color: #000000;
	/deep/.u-sticky-wrap {
		background-color: transparent !important;
	}
	.content22 {
		height: 100vh;
		overflow: scroll;
		background-color: #2a2929;
		padding: 20rpx 42rpx;
		.calbox {
			width: 100%;
			//height: 700rpx;
			border-bottom: 1rpx solid #151515;
		}
		.selectionPd {
			height: 37rpx;
			line-height: 37rpx;
			font-size: 38rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #dcdcdc;
			text-align: center;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
		}
		.time {
			display: flex;

			justify-content: space-around;
			height: 369rpx;
			margin-top: 32rpx;
			//margin-bottom: 32rpx;
			background-color: #2a2929;
			picker-view {
				// width: 472rpx;
				height: 369rpx;
				background-color: #2a2929;
			}
			picker-view-column {
				width: 136rpx;
				height: 369rpx;
				background-color: #2a2929;
				.item {
					width: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #dcdcdc;
					background-color: #2a2929;
				}
			}
			.item22 {
				width: 136rpx;
				height: 369rpx;
				display: flex;
				justify-content: center;
				.item {
					// margin-left: 100rpx;
				}
			}
		}
		.confrim-btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 568rpx;
			height: 115rpx;
			background: #dcdcdc;
			border-radius: 57rpx;
			padding-left: 39rpx;
			margin: 0 auto;

			.left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #2a2929;
			}
			.right {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 92rpx;
				height: 92rpx;
				margin-right: 12rpx;
				background: #880000;
				border-radius: 50%;
				font-size: 31rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #dcdcdc;
			}
		}
	}

	// 头部
	.head {
		width: 100vw;
		height: 476rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
	// 详情
	.details {
		position: relative;
		width: 710rpx;
		height: 487rpx;
		background: #2a2929;
		box-shadow: 10rpx 10rpx 7rpx 1rpx rgba(0, 0, 0, 0.22);
		border-radius: 15rpx;

		margin: 0 auto;

		padding: 39rpx 46rpx;
		z-index: 99;
		.layer {
			display: flex;
			justify-content: space-between;
			text {
				height: 36rpx;
				font-size: 38rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #ffffff;
				line-height: 36rpx;
			}
		}
		.scndFlrr {
			display: flex;
			justify-content: space-between;
			margin-top: 16rpx;
			.imm {
				display: inline-flex;
				justify-content: center;
				align-items: center;

				font-size: 23rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #ed000b;
				/deep/.u-countdown-item {
					width: 29rpx;
					height: 32rpx;
					background: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/my8.png) no-repeat center;
					background-size: cover;
					margin-right: 8rpx;
				}
				/deep/ .u-countdown-colon {
					width: 29rpx;
					height: 32rpx;
					background: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/my8.png) no-repeat center;
					background-size: cover;
					margin-right: 8rpx;
				}
			}
			.horzPrc {
				text-decoration: line-through;
				height: 22rpx;
				font-size: 25rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #dcdcdc;
				line-height: 22rpx;
				margin-right: 40rpx;
			}
		}
		.threeLayers {
			display: flex;
			margin-top: 27rpx;
			text {
				display: inline-block;
				padding: 4rpx 17rpx;
				//line-height: 31rpx;
				text-align: center;
				background: #dcdcdc;
				border-radius: 16rpx;
				margin-right: 10rpx;

				font-size: 22rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #1e2024;
			}
		}
		.fourPercent {
			width: 616rpx;
			//height: 2rpx;
			border-bottom: 2rpx solid #dcdcdc;
			opacity: 0.9;
			margin-top: 48rpx;
		}
		.fifthFlr {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			margin-top: 48rpx;
			height: 29rpx;

			text {
				height: 29rpx;
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #ffffff;
				line-height: 29rpx;
			}
			image {
				width: 34rpx;
				height: 18rpx;
				//vertical-align: middle;
			}
		}
		.sixthFlr {
			width: 400rpx;
			height: 125rpx;
			overflow: scroll;
			margin-top: 17rpx;
			.text {
				font-size: 20rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #dcdcdc;
			}
		}
	}
	//日历
	.cal {
		width: 710rpx;
		height: 402rpx;
		background: #2a2929;
		box-shadow: 10rpx 10rpx 7rpx 1rpx rgba(0, 0, 0, 0.22);
		border-radius: 15rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		.layer {
			height: 98rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 47rpx;

			.layer1 {
				display: flex;
				align-items: center;
				.text {
					height: 29rpx;
					font-size: 30rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #ffffff;
					line-height: 29rpx;
				}
				.text1 {
					border: 1rpx solid #dcdcdc;
					border-radius: 17rpx;
					padding: 5rpx 16rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 22rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #dcdcdc;
					margin-left: 27rpx;
				}
			}
			.layer2 {
				image {
					width: 19rpx;
					height: 21rpx;
				}
			}
		}
		.scndFlr {
			width: 646rpx;
			height: 244rpx;
			background: #2a2929;
			box-shadow: 0rpx 0rpx 38rpx 0rpx rgba(15, 15, 15, 0.65);
			border-radius: 15rpx;
			margin: 0 auto;
			padding: 38rpx 35rpx;

			.week {
				width: 100%;
				height: 16rpx;
				height: 16px;
				font-size: 18rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #ffffff;
				text {
					width: 40rpx;
					height: 40rpx;
				}
			}
			.day {
				width: 100%;
				height: 40rpx;
				margin-top: 30rpx;
				text {
					width: 40rpx;
					height: 40rpx;
					border: 1rpx solid #dcdcdc;
					border-radius: 50%;

					font-size: 23rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #dcdcdc;
				}
			}
			.time {
				width: 100%;
				height: 37rpx;
				margin-top: 43rpx;
				.carTm {
					width: 438rpx;
					height: 37rpx;
					line-height: 37rpx;
					background: #dcdcdc;
					border-radius: 19rpx;
					font-size: 22rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #2a2929;
				}
				text {
					// height: 22px;
					font-size: 22rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #e9e9e9;
					// line-height: 28px;
				}
			}
		}
	}
	// 介绍
	.introduction {
		position: relative;
		width: 710rpx;
		//height: 1681rpx;
		background: #2a2929;
		border-radius: 15rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		margin-bottom: 120rpx;

		.beijingtu {
			display: flex;
			width: 100%;
			height: 86rpx;
			view {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;
				width: 25%;
				height: 86rpx;
				text {
					display: flex;
					align-items: center;
					justify-content: center;
					flex: 1;
					width: 25%;
					height: 86rpx;
				}
			}
		}
		.frstFlr {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 65rpx;
			border: 1rpx solid #880000;
			border-radius: 15rpx 15rpx 0rpx 0rpx;
			display: flex;
			pointer-events: none;
			//pointer-events:none; 盒子的点击事件无效 给下面的盒子制造空间触发点击事件

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;

				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #dcdcdc;
				// background-size: cover;
			}
		}
		.vehIntroduction {
			position: relative;
			padding: 49rpx 59rpx 69rpx 59rpx;
			.one {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 36rpx;
				.text {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					height: 36rpx;
					font-size: 36rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #ffffff;
					line-height: 36rpx;
					z-index: 11;
				}
				.text1 {
					position: absolute;
					bottom: -5rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 162rpx;
					height: 15rpx;
					background: #880000;
					border-radius: 7rpx;
				}
			}
			.two {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-top: 50rpx;
				.yangshi1,
				.yangshi2 {
					position: absolute;
					button: 50%;

					transform: translateY(50%);
					height: 83rpx;

					border-left: 2rpx solid #dcdcdc;
				}
				.yangshi1 {
					left: 33.33%;
				}
				.yangshi2 {
					left: 66.66%;
				}
				.yangshi3,
				.yangshi4 {
					position: absolute;
					bottom: 25%;

					transform: translateY(25%);
					height: 83rpx;

					border-left: 2rpx solid #dcdcdc;
				}
				.yangshi3 {
					left: 33.33%;
				}
				.yangshi4 {
					left: 66.66%;
				}
				.example1,
				.example2,
				.example3,
				.example4,
				.example5,
				.example6 {
					width: 33.3333%;
					text {
						margin-top: 17rpx;
						height: 21rpx;
						font-size: 21rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #dcdcdc;
						line-height: 21rpx;
					}
					.xiahuanxian {
						margin-top: 15rpx;
						width: 60rpx;
						height: 4rpx;
						background: #dcdcdc;
						border-radius: 2rpx;
					}
				}

				.example1 {
					margin-left: -45rpx;
					.bgc {
						width: 80rpx;
						height: 80rpx;
						image {
							width: 80rpx;
							height: 80rpx;
						}
					}
				}
				.example2 {
					.bgc {
						width: 80rpx;
						height: 80rpx;
						image {
							width: 80rpx;
							height: 80rpx;
						}
					}
				}
				.example3 {
					margin-right: -45rpx;
					.bgc {
						width: 80rpx;
						height: 80rpx;
						image {
							width: 80rpx;
							height: 80rpx;
						}
					}
				}
				.example1,
				.example2,
				.example3 {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.bgc {
						width: 80rpx;
						height: 80rpx;
						image {
							width: 80rpx;
							height: 80rpx;
						}
					}
				}
				.example4,
				.example5,
				.example6 {
					margin-top: 54rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.bgc {
						width: 80rpx;
						height: 80rpx;
						image {
							width: 80rpx;
							height: 80rpx;
						}
					}
				}
				.example4 {
					margin-left: -45rpx;
					.bgc {
						width: 80rpx;
						height: 80rpx;
						image {
							width: 80rpx;
							height: 80rpx;
						}
					}
				}
				.example5 {
					.bgc {
						width: 80rpx;
						height: 80rpx;
						image {
							width: 80rpx;
							height: 80rpx;
						}
					}
				}
				.example6 {
					margin-right: -45rpx;
					.bgc {
						width: 80rpx;
						height: 80rpx;
						image {
							width: 80rpx;
							height: 80rpx;
						}
					}
				}
			}
		}
		.redHorzLine {
			position: relative;
			width: 653rpx;
			border-bottom: 1rpx solid #141414;
			margin: 0 auto;
			.red {
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 122rpx;
				height: 2rpx;
				background-color: #880000;
			}
		}
		.vehSecurity,
		.specialServ,
		.carProcess {
			margin-top: 64rpx;
			padding: 49rpx 59rpx 69rpx 59rpx;
			position: relative;
			.one {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 36rpx;
				.text {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					height: 36rpx;
					font-size: 36rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #ffffff;
					line-height: 36rpx;
					z-index: 11;
				}
				.text1 {
					position: absolute;
					bottom: -5rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 162rpx;
					height: 15rpx;
					background: #880000;
					border-radius: 7rpx;
				}
			}
			.two {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-top: 50rpx;
				.yangshi1,
				.yangshi2 {
					position: absolute;
					button: 50%;

					transform: translateY(50%);
					height: 83rpx;
					background: #1b1b1b;
					border-left: 2rpx solid #dcdcdc;
				}
				.yangshi1 {
					left: 33.33%;
				}
				.yangshi2 {
					left: 66.66%;
				}
				.example1,
				.example2,
				.example3 {
					width: 33.3333%;
					text {
						margin-top: 17rpx;
						height: 21rpx;
						font-size: 21rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #dcdcdc;
						line-height: 21rpx;
					}
					.xiahuanxian {
						margin-top: 15rpx;
						width: 60rpx;
						height: 4rpx;
						background: #dcdcdc;
						border-radius: 2rpx;
					}
				}
				.example1 {
					margin-left: -45rpx;
					.bgc {
						width: 80rpx;
						height: 80rpx;
						image {
							width: 80rpx;
							height: 80rpx;
						}
					}
				}
				.example2 {
					.bgc {
						width: 80rpx;
						height: 80rpx;
						image {
							width: 80rpx;
							height: 80rpx;
						}
					}
				}
				.example3 {
					margin-right: -45rpx;
					.bgc {
						width: 80rpx;
						height: 80rpx;
						image {
							width: 80rpx;
							height: 80rpx;
						}
					}
				}
				.example1,
				.example2,
				.example3 {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.bgc {
						width: 80rpx;
						height: 80rpx;
						image {
							width: 80rpx;
							height: 80rpx;
						}
					}
				}
			}
		}
	}
	//  立即下单
	.ordrNow {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;

		width: 750rpx;
		height: 106rpx;
		line-height: 106rpx;
		text-align: center;
		background: #880000;
		font-size: 36rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #ffffff;
	}
	//
	.active {
		background: url('https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/dididi.png') no-repeat center;
		background-size: cover;
	}
}
</style>
